<template>
  <el-scrollbar>
    <div class="content">
      <!-- //最外层的包裹卡片 最外层框架 -->
      <el-card style="width: 100%; height: 100%; margin-top: 20px">
        <!-- //文章循环体 -->
        <div
          v-for="item in articleList"
          :key="item.id"
          style="width: 100%; height: 270px; padding-top:20px"
        >
          <!-- //图片循环体 -->
          <div style="width: 30%; height: 239px; float: left">
            <img :src="item.articleCovers" alt="" style="height: 272px" />
          </div>
          <!-- //文章实体内容 -->
          <el-card style="width: 69%; height: 100%">
            <!-- //文章标题 以及连接 -->
            <h1 style="width: 100%; height: 50px; text-align: center">
              <el-link @click="GetArticeFromId(item.id)">
                {{ item.articleTitle }}</el-link
              >
            </h1>
            <!-- //文章简介 -->
            <!-- <el-card style="width: 100%; height: 70px; margin-top: 5px"> -->
            {{ item.articleSynopsis }}
            <!-- </el-card> -->
            <!-- //点赞量 评论量 阅读量 以及 发布日期 -->
            <div class="num" style="margin-top: 5px">
              <div style="width: 25%; height: 65px; margin-top: 50px">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-dianzan"></use></svg
                >{{ item.likeSum }}
              </div>
              <div style="width: 25%; height: 65px; margin-top: 50px">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-pinglun"></use></svg
                >{{ item.commentSum }}
              </div>
              <div style="width: 25%; height: 65px; margin-top: 50px">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-yuedu"></use></svg
                >{{ item.readSum }}
              </div>
              <div style="width: 25%; height: 65px; margin-top: 50px">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use></svg
                >{{ item.createdTime }}
              </div>
            </div>
          </el-card>
        </div>
      </el-card>
    </div>
  </el-scrollbar>
</template>

<script>
import { GetArticle } from "../api/articles";
export default {
  data() {
    return {
      articleList: [],
    };
  },
  mounted() {
    GetArticle().then(({ data }) => {
      // console.log("data");
      console.log(data.data.data);
      let arr = [];

      for (let i = 0; i < data.data.data.length; i++) {
        if (data.data.data[i].articlesClassify == "公司动态") {
          arr.push(data.data.data[i]);
        }
      }
      for (let i = 0; i < arr.length; i++) {
        arr[i].articleCovers = this.$host + arr[i].articleCovers;
      }
      this.articleList = arr;

      // console.log(this.articleList);
    });
  },
  methods: {
    GetArticeFromId(id) {
      this.$router.push(`/Article?id=${id}`);
    },
  },
};
</script>

<style>
/* .el-scollbar > .x{
  min-width:100%;
    display: inline-block;
} */
.el-scrollbar .el-scrollbar__wrap {
  max-height: 880px;
  overflow-x: hidden;
}
.icon {
  margin-right: 5px;
}
</style>